<template>
    <div class="layout">
        <div class="container" @click="itemClick">
            <div v-if="goodsCountMoreThanOne" class="img-container">
                <img class="goods-pic" v-for="(imgUrl,index) in orderImg" v-lazy="imgUrl" :key="index"/>
            </div>
            <div v-else class="img-container" style="align-items: flex-start">
                <img class="goods-pic" v-lazy="orderImg[0]"/>
                <div class="flex-c" style="margin-left: 10px;margin-top: 2vw;align-items: flex-start">
                    <span class="title" v-text="orderGoods[0].GoodType.title"></span>
                    <!--<span class="sub-title" v-text="item.buy_list[0].good.attr[0].value"></span>-->
                </div>
                <div style="flex: 1"></div>
            </div>
            <div class="flex-r">
                <img :src="getIcon('more')" style="width: 4vw" v-show="showEllipsis"/>
                <img :src="getIcon('arrow_right_hui')" class="icon-right"/>
            </div>
        </div>
        <div class="divider" style="margin-top: 10px"></div>
        <div class="flex-r" style="width: 100vw;margin: 2vw 0">
            <span class="time" v-text="dateFormat"></span>
            <div>
                <span class="total-price" v-text="getType"></span>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import Public from '@/assets/js/public';
    import Moment from 'moment';

    export default {
        /** kebab-case */
        name: 'item-refund-order',

        data() {
            return {
                item: this.itemObj,
                orderImg: [],
                orderGoods: [],
                trade: this.tradeStatus // 交易状态
            };
        },
        /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
         String/Number/Boolean/Function/Object/Array/Symbol */
        props: {
            itemObj: {
                required: true
            },
            orderType: {
                required: true,
                type: String
            },
            index: {
                require: true,
                type: Number
            },
            type: {
                type: String
            },
            tradeStatus: {
                type: String
            }
        },

        components: {},
        methods: {
            getIcon(icon) {
                return Public.iconImg + icon + '.svg';
            },
            itemClick() {
                this.$emit('onItemCLick', this.index);
            }
        },
        created() {
            // 重组每条订单的商品数组orderGoods
            for (let i in this.item.goods) {
                let pic = this.item.goods[i].GoodType.pic;
                this.orderGoods.push(this.item.goods[i]);
                this.orderImg.push(pic);
            }
        },
        computed: {
            goodsCountMoreThanOne() {
                return this.orderGoods.length > 1;
            },
            getType() {
                if (this.orderType === 'normal') {
                    return '¥' + this.orderGoods[0].AttrType.price;
                } else {
                    return this.this.orderGoods[0].AttrType.price + '积分';
                }
            },
            dateFormat() {
                // 时间
                return Moment(this.item.created * 1000).format('YYYY-MM-DD HH:mm');
            },
            showEllipsis() {
                return this.orderGoods.length > 3;
            }
        },
        watch: {
            // 监听具体数据变化，并做相应的处理
            itemObj: function (val) {
                this.item = val;
            },
            tradeStatus(val) {
                this.trade = val;
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl";
    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()

    .layout
        background-color white
        flex-y()
        margin-bottom 10px

    .container
        display flex
        flex-direction row
        justify-content space-between
        align-items center
        width 100vw
        padding-top 10px

    .img-container
        margin-left 10px
        width 84vw
        display flex
        flex-direction row
        justify-content flex-start
        align-items center

    .icon-right
        width 5vw
        margin-right 10px
        margin-left 4px

    .goods-pic {
        padding-left 1vw
        width 24vw
    }

    /*height 24vw*/

    .time
        word-tip()
        margin-left 10px

    .status
        word-vw(12, main-color);
        margin-right 10px
        border(main-color);
        border-radius(20px);
        padding 2px 3vw

    .close {
        word-vw(12, third-ash);
        border(third-ash);
    }

    .total-price
        word-big()
        margin-right 10px

    .sub-title
        word-small()
        margin-top 2vw

    .title
        word-main()
        line-height 1.5

    .img-wrapper[lazy=loading] {
        background third-ash
        width: 100%;
        height: 10vw
    }

</style>
